<template>
	<div v-if="emotionInfo.emotion === '负面' || emotionInfo.emotion === '正面' || tagList.length || intentionList.length" class="lm-recognition-module">
		<div v-if="emotionInfo.emotion === '负面' || emotionInfo.emotion === '正面'" class="module-item">
			<span class="module-label">识别到客户情绪</span>
			<div class="item-list">
				<h-button type="ghost" class="item-btn emotion"
				:class="{
					'green': emotionInfo.emotion === '正面',
					'red': emotionInfo.emotion === '负面'
				}">{{ emotionInfo.emotion_item }}</h-button>
			</div>
		</div>
		<div v-if="tagList.length" class="module-item">
			<span class="module-label">识别到客户标签</span>
			<div class="item-list">
				<h-button
					v-for="(item, index) of tagList" :key="index"
					type="ghost" class="item-btn">
					{{item.tag_name}}
					<span @click="addItem('tag', item)">
						<svg-icon iconClass="add2" class="icon"></svg-icon>
					</span>
					<span @click="deleteItem('tag', item)">
						<svg-icon iconClass="delete" class="icon"></svg-icon>
					</span>
				</h-button>
			</div>
		</div>
		<div v-if="intentionList.length" class="module-item">
			<span class="module-label">识别到客户意图</span>
			<div class="item-list">
				<h-button
					v-for="(item, index) of intentionList" :key="index"
					type="ghost" class="item-btn">
						{{item.intention_name}}
						<span @click="addItem('intention', item)">
							<svg-icon iconClass="add2" class="icon"></svg-icon>
						</span>
						<span @click="deleteItem('intention', item)">
							<svg-icon iconClass="delete" class="icon"></svg-icon>
						</span>
				</h-button>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations } from "vuex"
export default {
	name: 'LmRecognitionModule',
	data() {
		return {
		}
	},
	computed: {
		...mapState('lm-chat', ['recognitionModuleInfo', 'currentClientId', 'currentSessionInfo']),
		// 识别到客户情绪
		emotionInfo() {
			return this.recognitionModuleInfo.emotionInfo
		},
		// 识别到客户标签
		tagList() {
			return this.recognitionModuleInfo.clientTag || []
		},
		// 识别到客户意图
		intentionList() {
			return this.recognitionModuleInfo.clientIntent
		},
	},
	methods: {
		...mapMutations('lm-chat', ['updateRecognitionModuleInfo', 'updatePortraitInfo']),
		// 删除
		deleteItem(type, item) {
			if(type === 'tag') {
				this.$usePost(this.$url.deleteAdviceTag, {
					tag_name: item.tag_name,
					tag_type: item.tag_type,
					user_id: this.currentClientId,
					session_id: this.currentSessionInfo.session_id
				}).then(res => {
					this.updateRecognitionModuleInfo({
						moduleName: 'clientTag',
						moduleData: this.tagList.filter(u => u.tag_type = item.tag_type)
					})
				})
			} else if(type === 'intention') {
				this.$usePost(this.$url.deleteUserIntention, {
					ids: [item.id],
					user_id: this.currentClientId,
				}).then(res => {
					this.updateRecognitionModuleInfo({
						moduleName: 'clientIntent',
						moduleData: this.intentionList.filter(u => u.id = item.id)
					})
				})
			}
		},
		// 新增
		addItem(type, item) {
			if(type === 'tag') {
				this.$usePost(this.$url.addTag, {
					tag_name: item.tag_name,
					tag_type: item.tag_type,
					user_id: this.currentClientId,
					session_id: this.currentSessionInfo.session_id
				}).then(res => {
					this.deleteItem('tag', item)
					// 重新获取客户标签并更新客户画像中的客户标签数据
					this.$usePost(this.$url.queryTagByUserId, {
						user_id: this.currentClientId,
						session_id: this.currentSessionInfo.session_id
					}).then(res => {
						this.updatePortraitInfo({
							moduleName: 'sesstionTag',
							moduleData: res.data
						})
					})
				})
			} else if(type === 'intention'){
				this.$usePost(this.$url.addUserUntentionCustom, {
					intention_name: item.intention_name,
					user_id: this.currentClientId,
					session_id: this.currentSessionInfo.session_id
				}).then(res => {
					this.deleteItem('intention', item)
					// 重新获取本次意图并更新客户画像中的本次意图数据
					this.$usePost(this.$url.queryUserIntentionCustom, {
						user_id: this.currentClientId
					}).then(res => {
						this.updatePortraitInfo({
							moduleName: 'intentionArray',
							moduleData: res.data
						})
					})
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.lm-recognition-module{
	padding: 16px 16px 0;
	background: rgba(255,255,255,0.80);
	border-radius: 8px;
	margin: 0 20px 16px;
	.module-item{
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		.item-list{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex:1;
			width:0;
			.item-btn{
				margin-left: 10px;
				border-color: #D1D4FF;
				border-radius: 16px;
				cursor: default;
				color: #434343;
				&.emotion{
					font-weight: bold;
					//background-image: linear-gradient(270deg, #F1FAFF 1%, #FDF5FE 100%);
				}
				&.red{
					color: #E42222;
				}
				&.green{
					color: #41AD3C;
				}
				&:hover{
					.icon{
						display: inline-block;
					}
				}
				.icon{
					width: 12px;
					height: 12px;
					margin-left: 4px;
					display: none;
				}
			}
		}
	}
}
</style>